<div style="padding: 10px 10px 0 10px;">
  <md-input-container style="width: 100%;">
    <input mdInput #filterName name="name" i18n-placeholder="name" placeholder="Name" (keyup.enter)="onRefresh(filterName.value)">
    <md-icon mdPrefix>search</md-icon>
  </md-input-container>
</div>
<div fxLayout fxLayoutWrap fxFlex="100" class="containers-list">
  <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.gt-sm="33.3333" fxFlex.gt-lg="25" *ngFor="let item of containers; let i = index">
    <md-card>
      <md-card-subtitle>
        <div fxLayout="row" fxLayoutAlign="space-between center" style="line-height: 26px;">
          <span *ngFor="let name of item.Names">{{name.slice(1)}}</span>
          <span *ngIf="item.State == 'running'" class="containers-list-item-running" i18n>Running</span>
          <span *ngIf="item.State == 'exited'" class="containers-list-item-stopped" i18n>Stoped</span>
          <span *ngIf="item.State == 'waiting'" class="containers-list-item-stopped" i18n>Waitting</span>
          <span *ngIf="item.State == 'created'" class="containers-list-item-stopped" i18n>Created</span>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <label i18n="image">Image: </label><span>{{item.Image}}</span>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <label i18n="port">Ports: </label>
          <span *ngFor="let port of item.Ports">{{port.PublicPort}}:{{port.PrivatePort}}->{{port.Type}}</span>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <label i18n="network">Network: </label><span>{{item.HostConfig.NetworkMode}}</span>
        </div>
      </md-card-subtitle>

      <md-card-actions fxLayout="row" fxLayoutAlign="center end">

        <button md-icon-button i18n-title="start" title="Start" *ngIf="item.State != 'running'" (click)="onStart(item.Id, i)">
          <md-icon>play_arrow</md-icon>
        </button>

        <button md-icon-button i18n-title="stop" title="Stop" *ngIf="item.State == 'running'" (click)="onStop(item.Id, i)">
          <md-icon>pause</md-icon>
        </button>

        <button md-icon-button i18n-title="log" title="Logs" (click)="onLogs(item.Id, i)">
          <md-icon>content_paste</md-icon>
        </button>

        <button md-icon-button i18n-title="restart" title="Restart" *ngIf="item.State == 'running'" (click)="onRestart(item.Id, i)">
          <md-icon>replay</md-icon>
        </button>

        <!--<button md-icon-button title="Exec" *ngIf="item.State == 'running'">
          <md-icon>code</md-icon>
        </button>-->

        <button md-icon-button i18n-title="remove" title="Remove" (click)="onRemove(item.Id, i)">
          <md-icon>delete_forever</md-icon>
        </button>

        <button md-icon-button i18n-title="settings" title="Settings" (click)="onSettings(item.Id, i)">
          <md-icon>settings</md-icon>
        </button>

      </md-card-actions>
    </md-card>

    <layer *ngIf="item.State == 'waiting'" [height]="182"></layer>
  </div>
</div>

<button title="Refresh" i18n-title="refresh" style="position: fixed; z-index: 2; right: 5px; bottom: 10px;" md-mini-fab (click)="onRefresh()">
  <md-icon>refresh</md-icon>
</button>
